const path = require('path'); //node 内置的模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
const CleanWebpackPlugin= require("clean-webpack-plugin"); //清除之前打包的文件
module.exports = {
    // 项目的入口
    entry: './src/js/entry.js',
    //输出的配置 出口
    output: {
        //输出的文件名
        filename: 'bundle.js',
        //resolve  __dirname 根目录  根目录触发找到dist/js
        path: path.resolve(__dirname, 'dist/js'),
        // 设置图片的 查找目录(设置为index.html 提供资源服务的时候，设置完后找所有的资源都会去当前目录下找。)
        // publicPath:'js/'
    },
    module: {
        // loaders
        rules: [
            // 打包css loader的配置
            {
                test: /\.css$/,
                use: [
                    //负责加载到页面中的style标签中
                    'style-loader',
                    //负责加载css
                    'css-loader'
                ]
            },
            // 打包图片的 loader的配置
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        // 设置如果图片小于8K 可以自己设置，就打包进js里面 因为你引入一个图片就会发一个请求，减少图片请求
                        options: {
                            // 单位是b
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    },
    // 热启动的配置
    devServer:{
        contentBase:'./dist/js', //webpack-dev-server默认启动根路径下的index.html
        port: 9009
    },
    // 插件 数组 可以配置多个插件
    plugins: [
        //可以删除指定目录下的所有资源 先删除 在生成
        new CleanWebpackPlugin(['dist']),
        // 根据模板对象生成一个新的 html
        new HtmlWebpackPlugin({template: './index.html'})
    ]
};